<template>
    <div class="login_container">
        <el-card header="管理员登录" class="login_card">
            <el-form
                label-width="70px"
                :model="form"
                :rules="rules"
                ref="ruleForm"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        autocomplete="off"
                        type="password"
                        v-model="form.password"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        :loading="loading"
                        @click="submitForm('ruleForm')"
                        >登录</el-button
                    >
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
const PassReg = /^(?![A-Z]+$)(?![a-z]+$)(?![0-9]*$)(?![@#￥%^&_+-/=?]+$).{8,16}$/;
export default {
    name: "Login",
    components: {},
    data() {
        let validatePass = (rule, value, callback) => {
            if (!PassReg.test(value)) {
                callback(new Error("密码由数字，英文，特殊字符其中两项组成"));
            } else {
                callback();
            }
        };
        return {
            loading: false,
            form: {
                username: "",
                password: "",
            },
            //表单验证方法
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入管理员名",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 10,
                        message: "长度在 3 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur",
                    },
                    {
                        validator: validatePass,
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.loading = true;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.login();
                } else {
                    this.loading = false;
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        login() {
            this.$http
                .post("login", this.form)
                .then((res) => {
                    this.loading = false;
                    if (res.status === 200) {
                        localStorage.token = res.data.token;
                        this.$router.push("/");
                        this.$message({
                            type: "success",
                            message: "登录成功",
                        });
                    } else {
                        this.$message("登录失败");
                    }
                })
                .catch((err) => {
                    this.loading = false;
                    console.log(err);
                });
        },
    },
};
</script>

<style>
.login_card {
    width: 25rem;
    margin: 5rem auto;
}
.el-card__header {
    text-align: center;
}

.el-button--primary {
    margin-left: 38px;
}
</style>
